<template>
  <div class="header">
    <div class="header-return" @click="toHome" v-show="!shouClick">
      <span class="border-return"></span>
      <span class="iconfont return">&#xe646;</span>
    </div>

    <div class="header-top" v-show="!showHeader" :style="styleOpacty">
      <div class="header-left" @click="toHome">
        <span class="iconfont">&#xe646;
        </span>
      </div>
      {{this.currentCity+"景区"}}
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'DetailsHeader',
  data () {
    return {
      // 如国重新http发送请求时 重新调用盖房阿飞
      showHeader: true,
      shouClick: false,
      styleOpacty: {
        opacity: 0
      }
    }
  },
  methods: {
    toHome () {
      this.$router.push('/')
    }
  },
  computed: {
    ...mapState({
      currentCity: 'scenicSpot'
    })
  },
  mounted () {
    let _this = this
    // 绑定全局事件
    window.addEventListener('scroll', function () {
      let top = document.documentElement.scrollTop
      if (top > 5) {
        let opacity = top / 80
        _this.styleOpacty = {opacity}
        opacity = opacity > 1 ? 1 : opacity
        _this.showHeader = false
      } else {
        _this.showHeader = true
      }
      if (top > 5) {
        _this.shouClick = true
      } else {
        _this.shouClick = false
      }
      // console.log(top,this.showHeader)
    })
  }
}
</script>

<style lang="stylus" scoped>
.header
  position relative
  .header-return
    position absolute
    left .1rem
    top -4rem
    width .72rem
    height 0.72rem
    .iconfont
      font-weight bold
    .border-return
      display block
      background #000
      width 0.72rem
      height  0.72rem
      opacity .6
      border-radius .36rem
    .return
      position absolute
      left -.09rem
      top 0
      color #fff
      width 0.72rem
      height 0.72rem
      line-height .75rem
      text-align left
      text-indent .24rem
      font-size .4rem
  .header-top
    z-index 99
    position fixed
    top 0
    text-align center
    width 100%
    line-height .88rem
    background #00bcd4
    font-size .36rem
    color white
    .header-left
      position absolute
      width .4rem
      padding 0 .2rem
      text-align center
      font-weight bold
</style>
